import { Point } from '../model';
import { Vector2, Vector2Util } from '../utils';
import { BoundingBox } from './boundingBox';

export class BaseCanvas extends BoundingBox {

    /**
     * current canvas
     */
    canvasEle: HTMLCanvasElement;
    /**
     * current render context
     */
    ctx: CanvasRenderingContext2D;
    /**
     * animation timer
     */
    animationFrameTimer = 0;

    /**
     * current element points
     */
    points!: Point[];

    /**
     *  current element is active/disactive
     */
    isActive = false;

    /**
     * element is moving
     */
    isMoving = false;

    /**
     *  disable control bounding box
     */
    disabledScale = false;

    /**
     * rotate control point
     */
    rotateControl!: Point;
    /**
     * disable top rotate
     */
    disableRotate = false;


    constructor(canvasEle: HTMLCanvasElement | string) {
        super();
        this.canvasEle = canvasEle instanceof HTMLCanvasElement ? canvasEle :
            document.querySelector(canvasEle) as HTMLCanvasElement;
        this.ctx = this.canvasEle.getContext('2d')!;
    }

    /**
     * init animation
     * @param that current call class, it is necessary or cannt get the object
     * @param animationAction animation function
     * @param args function arguments
     */
    startAnimation(that: object, animationAction: Function, ...args: any) {
        this.animationFrameTimer = window.requestAnimationFrame(() => {
            animationAction.bind(that)(...args);
        });
    }

    /**
     * stop animation
     */
    stopAnimation() {
        window.cancelAnimationFrame(this.animationFrameTimer);
    }

}
